import React, { FC, useState, ReactNode } from 'react';
import { Select, Space, Form } from 'antd';
import { options as data } from './config';
import _ from 'lodash';

const CustomSelectDemo: FC = () => {
  const [options, setOptions] = useState<any[]>([]);

  const onSearch: (value: string) => void = _.debounce((value) => {
    const getOptions = function () {
      return new Promise((reslove, reject) => {
        setTimeout(() => {
          reslove(data);
        }, 1000);
      });
    };
    getOptions().then((ret: { name: string | ReactNode; id: number }[]) => {
      setOptions(
        _.map(ret, (item, key) => {
          return {
            label: (
              <Space split={'|'}>
                <span>{item.name}</span>
                <span style={{ color: 'green' }}>{item.id}</span>
              </Space>
            ),
            value: String(item.id),
          };
        })
      );
    });
  }, 300);
  return (
    <Form>
      <Form.Item label="CustomSelectDemo" name="CustomSelectDemo">
        <Select
          mode="multiple"
          options={options}
          showSearch
          onSearch={onSearch}
          style={{ width: 1000 }}
          filterOption={false}
        ></Select>
      </Form.Item>
    </Form>
  );
};

export default CustomSelectDemo;
